import React, {useEffect, useState} from "react";
import {Col, Row, Card, Table} from 'antd';
import styles from "./index.less";
import homeApi from "../../api";

const {Meta} = Card;

const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
    },
];

export default () => {
    const [dataSource,setDataSource] = useState([])

    const getData = async () => {
        try {
            const {data} = await homeApi.featGetData()
            console.log(data, '===data')
            setDataSource(data.tableData)
        } catch (e) {
            // console.log(e,'===e')
        }

    }

    useEffect(() => {
        getData()
    }, [])
    return (
        <Row className={styles['home']} gutter={[8, 8]}>
            <Col span={8}>
                <Card
                    hoverable
                    cover={<img alt="example"
                                // style={{height:300,width:300,margin:'auto'}}
                                src="https://q3.itc.cn/q_70/images03/20240519/1b4e7565b46241b68288ae482412a866.jpeg"/>}
                >
                    <Meta title="Europe Street beat" description="www.instagram.com"/>
                </Card>
            </Col>
            <Col span={8}>
                <Card   hoverable>
                    <Table dataSource={dataSource} columns={columns} pagination={false} />
                </Card>
            </Col>
        </Row>
    )
}